<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>uupaa-mutationevent-lite.js event test</title>
<style type="text/css">
div>span { border: 2px solid #0c0; background-color: #0f0; }
</style>
<script type="text/javascript" src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-detect.js/uupaa-detect.mini.js"></script>
<script type="text/javascript" src="../uupaa-mutationevent-lite.js"></script>
</head><body>
| node:
<input type="button" value="append" onclick="append()" />
<input type="button" value="insert" onclick="insert()" />
<input type="button" value="replace" onclick="replace_()" />
<input type="button" value="remove" onclick="remove()" />
<input type="button" value="enable" onclick="enable_()" />
<input type="button" value="disable" onclick="disable_()" />
| modify property:
<input type="button" value="mod1" onclick="mod1()" />
<input type="button" value="mod2" onclick="mod2()" />
<input type="button" value="mod3" onclick="mod3()" />
| setAttribute:
<input type="button" value="mod11" onclick="mod11()" />
<input type="button" value="mod12" onclick="mod12()" />
| removeAttribute:
<input type="button" value="mod15" onclick="mod15()" />
<input type="button" value="mod16" onclick="mod16()" />
| setter:
<input type="button" value="mod21" onclick="mod21()" />
<input type="button" value="mod22" onclick="mod22()" /><br />
| IE method:
<input type="button" value="mod31" onclick="mod31()" />
<input type="button" value="mod32" onclick="mod32()" />
<input type="button" value="mod33" onclick="mod33()" />

<script>
var g = 0;
function me()       { return document.getElementById("me"); }
function span(txt)  { var text = document.createTextNode(txt);
                      var span = document.createElement("span");
                      span.appendChild(text);
                      return span; }
function append()   { var n=me(); n.appendChild(span("append")); }
function insert()   { var n=me(); n.insertBefore(span("insert"), n.lastChild); }
function replace_() { var n=me(); n.lastChild && n.replaceChild(span("replace"), n.lastChild); }
function remove()   { var n=me(); n.lastChild && n.removeChild(n.lastChild); }
function enable_()  { uuClass.MutationEventLite.enable(); }
function disable_() { uuClass.MutationEventLite.disable(); }

function mod1()     { var n=me(); n.lastChild && (n.lastChild.oreoreprop = ++g); }
function mod2()     { var n=me(); n.lastChild && (n.lastChild.title = ++g); }
function mod3()     { var n=me(); n.lastChild && (n.lastChild.style.backgroundColor = "#55" + (++g % 10)); }
//function mod3()     { var n=me(); n.lastChild && (n.lastChild.style.cssText = "background-color:#55" + (++g % 10)); }
function mod11()    { var n=me(); n.lastChild && n.lastChild.setAttribute("g", ++g); }
function mod12()    { var n=me(); n.lastChild && n.lastChild.setAttribute("title", ++g); }
function mod15()    { var n=me(); n.lastChild && n.lastChild.removeAttribute("g"); }
function mod16()    { var n=me(); n.lastChild && n.lastChild.removeAttribute("title"); }
function mod21()    { var n=me(); n.lastChild && (n.lastChild.innerHTML = "innerHTML" + ++g); }
function mod22()    { var n=me(); n.lastChild && (n.lastChild.innerText = "innerText" + ++g); }
function mod31()    { var n=me(); n.lastChild && n.lastChild.insertAdjacentText
                                              && n.lastChild.insertAdjacentText("BeforeEnd", "insertAdjacentText" + ++g); }
function mod32()    { var n=me(); n.lastChild && n.lastChild.insertAdjacentHTML
                                              && n.lastChild.insertAdjacentHTML("BeforeEnd", "<span>insertAdjacentHTML" + ++g + "</span>"); }
function mod33()    { var n=me(); n.lastChild && n.lastChild.insertAdjacentElement
                                              && n.lastChild.insertAdjacentElement("BeforeEnd", span("insertAdjacentElement")); }

function fn(type) {
  window.status = "uuClass.MutationEventLite.age = " + uuClass.MutationEventLite.age;
}
window.onload = function() {
  uuClass.MutationEventLite(fn);
}
</script>
<pre>
function append()   { var n=me(); n.appendChild(span("append")); }
function insert()   { var n=me(); n.insertBefore(span("insert"), n.lastChild); }
function replace_() { var n=me(); n.lastChild &amp;&amp; n.replaceChild(span("replace"), n.lastChild); }
function remove()   { var n=me(); n.lastChild &amp;&amp; n.removeChild(n.lastChild); }
function enable_()  { uuClass.MutationEvent.enable(); }
function disable_() { uuClass.MutationEvent.disable(); }

function mod1()     { var n=me(); n.lastChild &amp;&amp; (n.lastChild.oreoreprop = ++g); }
function mod2()     { var n=me(); n.lastChild &amp;&amp; (n.lastChild.title = ++g); }
function mod3()     { var n=me(); n.lastChild &amp;&amp; (n.lastChild.style.backgroundColor = "#55" + (++g % 10)); }
function mod11()    { var n=me(); n.lastChild &amp;&amp; n.lastChild.setAttribute("g", ++g); }
function mod12()    { var n=me(); n.lastChild &amp;&amp; n.lastChild.setAttribute("title", ++g); }
function mod15()    { var n=me(); n.lastChild &amp;&amp; n.lastChild.removeAttribute("g"); }
function mod16()    { var n=me(); n.lastChild &amp;&amp; n.lastChild.removeAttribute("title"); }
function mod21()    { var n=me(); n.lastChild &amp;&amp; (n.lastChild.innerHTML = "innerHTML" + ++g); }
function mod22()    { var n=me(); n.lastChild &amp;&amp; (n.lastChild.innerText = "innerText" + ++g); }
function mod31()    { var n=me(); n.lastChild &amp;&amp; n.lastChild.insertAdjacentText
                                              &amp;&amp; n.lastChild.insertAdjacentText("BeforeEnd", "insertAdjacentText" + ++g); }
function mod32()    { var n=me(); n.lastChild &amp;&amp; n.lastChild.insertAdjacentHTML
                                              &amp;&amp; n.lastChild.insertAdjacentHTML("BeforeEnd", "&lt;span&gt;insertAdjacentHTML" + ++g + "&lt;/span&gt;"); }
function mod33()    { var n=me(); n.lastChild &amp;&amp; n.lastChild.insertAdjacentElement
                                              &amp;&amp; n.lastChild.insertAdjacentElement("BeforeEnd", span("insertAdjacentElement")); }
</pre>
<div id="me"><p>mutation event</p></div>
</body></html>
